<template>
  <div>
    <!-- 面包屑 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }"><span>首页</span></el-breadcrumb-item>
    <!-- <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> -->
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card>
    <!-- 按钮 -->
    <el-row>
    <el-col>
      <el-button type="primary">添加角色</el-button>
    </el-col>
  </el-row>

    <!-- 表格 -->
    <el-table
      :data="rolesList"
      style="width: 100%" border stripe>
      <el-table-column prop="id" label="#" type="index"></el-table-column>
      <el-table-column type="expand">
        <template  slot-scope="data">
         <el-row v-for="(item,index) in data.row.children" :key="item.id"  :class="['btnBottm',index == 0 ? 'btnTop' : '']" class="vcenter">
           <!-- 左侧 一级 -->
           <el-col :span="5">
             <el-tag>{{item.authName}}</el-tag>
             <i class="el-icon-caret-right"></i>
           </el-col>
           <!-- 右侧 二级和三级 -->
           <el-col :span="19">
             <!-- 循环二级对象  -->
             <el-row  v-for="(itemm,index) in item.children" :key="itemm.id" :class="[index == 0 ? '' : 'btnTop']"  class="vcenter">
               <el-col :span="6">
                 <!-- 二级对象中的名称做已展示 -->
                 <el-tag type="warning" closable @close="handleClose(itemm.id, data.row)">{{itemm.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
               </el-col>
               <!-- 三级 -->
               <el-col :span="19">
                 <!-- 三级内容拿着二级的children 循环 取name展示 -->
                 <el-tag v-for="itemmm in itemm.children" :key="itemmm.id" type="success" closable @close="handleClose(itemmm.id, data.row)">{{itemmm.authName}}</el-tag >
               </el-col>
             </el-row>
           </el-col>
         </el-row>
       </template>
       </el-table-column>
      <el-table-column
        prop="roleName"
        label="权限名称">
      </el-table-column>
      <el-table-column
        prop="roleDesc"
        label="角色描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="data">
        <div class="bt">
          <el-button type="primary" size="mini"  icon="el-icon-edit"  @click="index(data.row.id)">编辑</el-button>
        <el-button type="danger"   size="mini"  icon="el-icon-delete"  @click="del(data.row.id)">删除</el-button>
          <el-button type="warning"  size="mini" icon="el-icon-setting" @click="set(data.row)">分配权限</el-button>
        </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 分配权限弹出框 -->
  <el-dialog
  title="分配权限"
  :visible.sync="rolesLogVisible"
  width="50%" @close="closerolesLogVisible">
    <!-- 树形节点 -->
    <!-- <el-tree :data="RightsUsersList" :props="props" show-checkbox default-expand-all node-key="id" :default-expanded-keys="defKey">
    </el-tree> -->
    <el-tree :data="RightsUsersList" :props="props" show-checkbox default-expand-all node-key="id" :default-checked-keys="defKey" ref="treeRef"></el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="rolesLogVisible = false">取 消</el-button>
      <el-button type="primary" @click="chooseRightsUserList">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rolesList: [], // 角色列表数据 包含角色对应的权限
      RightsUsersList: [], // 权限列表数据
      props: {
        label: 'authName',
        children: 'children'
      }, // 控制权限列表展示的数据
      rolesLogVisible: false,
      defKey: [], // 默认选中的属性节点
      rightsId: 0
    }
  },
  created () {
    this.getRolesList()
  },
  methods: {
    clearPath () { // 首页跳转清除缓存
      sessionStorage.removeItem('path')
      this.$router.go(0)
    },
    async getRolesList () { // 获取角色列表
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return this.$notify.error({ title: '错误', message: res.meta.msg })
      this.rolesList = res.data
    },
    set (node) { // 弹出分配权限弹出框
      this.rolesLogVisible = true
      this.getRightsUsersList()
      this.getDefKey(node)
      this.rightsId = node.id
    },
    async getRightsUsersList () { // 获取分配权限树形数据
      const { data: res } = await this.$http.get('rights/tree')
      if (res.meta.status !== 200) return this.$notify.error({ title: '错误', message: res.meta.msg })
      this.RightsUsersList = res.data
    },
    async handleClose (rightId, role) { // 删除下拉框中的TAG标签的提示框
      const data = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(res => res) // 通过catch捕获错误并且返回res
      if (data === 'cancel') return
      const { data: res } = await this.$http.delete('roles/' + role.id + '/rights/' + rightId)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message({ message: res.meta.msg, type: 'success' })
      role.children = res.data
    },
    getDefKey (node) { // 递归获取角色权限的三级节点
      if (!node.children) return this.defKey.push(node.id)
      node.children.forEach(item => {
        this.getDefKey(item)
      })
    },
    closerolesLogVisible () { // 关闭分配权限时，清空defKey
      this.defKey = []
    },
    async chooseRightsUserList () { // 点击确定按钮修改角色权限
      const chooseKey = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
      const str = chooseKey.join(',')
      const { data: res } = await this.$http.post('roles/' + this.rightsId + '/rights', { rids: str })
      if (res.meta.status !== 200) return this.$notify.error({ title: '错误', message: res.meta.msg })
      this.$message({ message: res.meta.msg, type: 'success' })
      this.getRolesList()
      this.rolesLogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
.btnTop {
  border-top: 1px solid #ccc;
}
.btnBottm {
  border-bottom:1px solid #ccc ;
}
.el-tag {
  margin: 10px;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>
